<template>
  <div v-loading="loading" class="container">
    <el-input
      v-model="txt"
      :rows="8"
      type="textarea"
      class="textarea"
      show-word-limit
      :disabled="disablestatus"
      maxlength="1300"
    ></el-input>
    <el-button
      v-if="insertcontent"
      class="insert-word"
      icon="el-icon-user-solid"
      round
      :disabled="disablestatus"
      @click="insertText"
      >插入{{ insertcontent }}</el-button
    >
    <div class="line"></div>

    <el-popover
      placement="top-start"
      width="440"
      trigger="hover"
      accept="image/*"
    >
      <template #reference>
        <el-button :disabled="disablestatus" plain style="margin: 10px">
          <el-icon :size="15"> <Plus /> </el-icon>
          添加图片/视频/链接/小程序</el-button
        >
      </template>

      <div class="item-box">
        <el-upload
          action=""
          :http-request="(e) => upload(e, 1)"
          list-type="text"
          :show-file-list="false"
        >
          <div class="item">
            <!-- <i class="el-icon-picture-outline"></i> -->
            <img
              src="https://static.lianhaikeji.com/workwx/20210610/企微112图片20210610095031.png"
              alt=""
            />
            <div class="name">图 片</div>
          </div>
          <div class="tips">大小在2M以内</div>
        </el-upload>
        <el-upload
          action=""
          :http-request="(e) => upload(e, 4)"
          list-type="text"
          :show-file-list="false"
        >
          <div class="item">
            <!-- <i class="el-icon-picture-outline"></i> -->
            <img
              src="https://static.lianhaikeji.com/workwx/20210610/企微-素材中心112图片9b70bebfaba01a19215eade3a207215b.png"
              alt=""
            />
            <div class="name">视 频</div>
          </div>
          <div class="tips">大小在2M以内</div>
        </el-upload>
        <div class="item" @click="dialogLink = true">
          <!-- <i class="el-icon-picture-outline"></i> -->
          <img
            src="https://static.lianhaikeji.com/workwx/20210610/企微-素材中心112图片a82849aae1693f790061198167246151.png"
            alt=""
          />
          <div class="name">链 接</div>
        </div>
        <div class="item" @click="dialogWechat = true">
          <!-- <i class="el-icon-picture-outline"></i> -->
          <img
            src="https://static.lianhaikeji.com/workwx/20210610/企微-素材中心112图片67b71f0e4d2e9fdbf7e53e35519fbbde.png"
            alt=""
          />
          <div class="name">小程序</div>
        </div>
      </div>
    </el-popover>

    <div class="attachments-list">
      <div v-for="(item, index) in filelist" :key="index" class="flex-contain">
        <img :src="icon[item.materialType]" alt="" />
        <p
          v-if="item.materialType == 2 || item.materialType == 3"
          class="flex-1"
        >
          {{ item.title }}
        </p>
        <p v-else class="flex-1">{{ item.fileName }}</p>
        <el-icon
          v-if="!disablestatus"
          class="el-icon-close"
          @click="delFileList(index)"
          ><close
        /></el-icon>
      </div>
    </div>

    <el-dialog
      title="添加链接"
      append-to-body
      v-model="dialogLink"
      width="460px"
      :before-close="closeDialog"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="链接地址" prop="url">
          <el-input
            v-model="form.url"
            placeholder="请输入链接网址"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="链接标题" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入链接标题"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="链接描述" prop="desc">
          <el-input
            v-model="form.desc"
            maxlength="170"
            show-word-limit
            type="textarea"
            placeholder="请输入链接描述"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item v-if="dialogLink" label="封面图" prop="ossUrl">
          <!-- <ImageUpload v-model="ImageUploadData"></ImageUpload> -->
          <Upload
            v-model="ImageUploadData.url"
            :limit="1"
            :show-file-list="false"
            @success="success"
          >
            <template #default>
              <div class="upload-img" v-if="ImageUploadData.url">
                <img :src="ImageUploadData.url" class="avatar" />

                <div @click.stop="">
                  <el-icon :size="25" class="avatar-delete" @click="clearImg"
                    ><Delete
                  /></el-icon>
                </div>
              </div>
              <div v-else>
                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              </div>
            </template>
          </Upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="addForm(2)">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      title="添加小程序"
      v-model="dialogWechat"
      append-to-body
      width="460px"
      :before-close="closeDialog"
    >
      <p class="appIdTips">
        注:请填写企业微信后台绑定的小程序id和路径,否则会造成发送失败
      </p>
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="105px">
        <el-form-item label="小程序标题" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入小程序标题"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="小程序appID" prop="appid">
          <el-input
            v-model="form.appid"
            placeholder="请输入小程序appID"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="小程序路径" prop="page">
          <el-input
            v-model="form.page"
            placeholder="请输入小程序路径"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item v-if="dialogWechat" label="封面图" prop="ossUrl">
          <!-- <ImageUpload v-model="ImageUploadData"></ImageUpload> -->
          <Upload
            v-model="ImageUploadData.url"
            :limit="1"
            :show-file-list="false"
            @success="success"
          >
            <template #default>
              <div class="upload-img" v-if="ImageUploadData.url">
                <img :src="ImageUploadData.url" class="avatar" />

                <div @click.stop="">
                  <el-icon :size="25" class="avatar-delete" @click="clearImg"
                    ><Delete
                  /></el-icon>
                </div>
              </div>
              <div v-else>
                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              </div>
            </template>
          </Upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="addForm(3)">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { upload } from "@/utils/minio-upload";
import Upload from "@/components/upload.vue";
export default {
  name: "TextAreaUpload",
  components: {
    Upload,
  },
  props: {
    disablestatus: {
      type: Boolean,
      default: false,
    },
    content: {
      require: false,
      type: String,
      default: () => {
        return "";
      },
    },
    attachments: {
      type: Array,
      default() {
        return [];
      },
    },
    insertcontent: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      txt: this.content,
      file: this.image,
      loading: false,
      dialogLink: false,
      dialogWechat: false,
      form: {},
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        desc: [
          { required: true, message: "请输入链接描述", trigger: "blur" },
        ],
        url: [
          { required: true, message: "请输入链接url", trigger: "blur" },
        ],
        ossUrl: [{ required: true, message: "请上传封面图", trigger: "blur" }],
        appid: [
          { required: true, message: "请输入小程序APPID", trigger: "blur" },
        ],
        page: [
          { required: true, message: "请输入小程序page路径", trigger: "blur" },
        ],
      },
      ImageUploadData: {
        name: "",
        url: "",
      },
      imageUrl: "",
      filelist: this.attachments || [],
      icon: {
        1: "https://static.lianhaikeji.com/workwx/20210615/企微112图片20210615143238.png",
        4: "https://static.lianhaikeji.com/workwx/20210615/企微112图片20210615142004.png",
        2: "https://static.lianhaikeji.com/workwx/20210615/企微112图片20210615143303.png",
        3: "https://static.lianhaikeji.com/workwx/20210615/企微112图片20210615143328.png",
      },
    };
  },
  watch: {
    txt(newValue) {
      // this.$emit("update:content", newValue);
      this.$emit("setContent", newValue);
    },
     filelist: {
      handler(val) {
        this.$emit("setAttachments", val);
      },
      deep: true,
    },

  },
  mounted() {
    this.txt = this.content;
    this.file = this.image;
  },
  methods: {
    async upload(e, type) {
      if (e.file.size > 1024 * 1024 * 2) {
        this.$message.error("文件大小超过2M");
        return;
      }
      let file = e.file;
      let formdata = new FormData(); // 创建form对象
      formdata.append("file", file); // 通过append向form对象添加数据,可以通过append继续添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.loading = true;

      let res = await upload(file, "workWechat");
   
      if (res) {
        // this.file = res.payload;
        this.filelist.push({
          materialType: type,
          ossUrl: res.url,
          imageWxUrl: res.url,
          fileName: res.name,
        });
      }
      this.loading = false;
    },
    insertText() {
      if (this.txt.length + this.insertcontent.length >= 98) {
        this.$message({
          message: "超出最大长度！",
          type: "warning",
        });
        return;
      }
      this.txt += `#${this.insertcontent}#`;
    },

    success(val) {
      this.ImageUploadData = val;
      this.form.imageWxUrl = val.url;
      this.form.ossUrl = val.url;
      this.form.fileName = val.name;

      console.log("[ val ] >", val);
    },
    delFileList(index) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.filelist.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addForm(type) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.filelist.push({
            materialType: type,
            ...this.form,
          });
          this.dialogLink = false;
          this.dialogWechat = false;
          this.form = {};
          this.ImageUploadData = {
            url: "",
            name: "",
          };
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.dialogLink = false;
      this.dialogWechat = false;
      this.delImg();
    },
    clearImg() {
      ElMessageBox.confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delImg();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    },
    delImg() {
      this.ImageUploadData = {
        name: "",
        url: "",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 550px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;

  .line {
    width: 92%;
    border-bottom: 1px solid #dcdfe6;
    margin: 0 auto;
  }

  .insert-word {
    position: absolute;
    background-color: #ebeef5;
    border: none;
    color: #606266;
    right: 55px;
    top: 110px;
  }

  .attachments-list {
    &-item {
      width: 280px;
      padding: 0 13px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 22px;
      margin-bottom: 12px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 3px;
      }
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      i {
        cursor: pointer;
        display: none;
      }
    }
    &-item:hover {
      i {
        display: block;
      }
    }
  }
  .appIdTips {
    color: #e6a23c;
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    margin-bottom: 5px;
  }
}

.item-box {
  display: flex;
  justify-content: center;

  .item {
    flex: 1;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 8px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    text-align: center;
    margin: 12px;

    &:hover {
      border-color: #2f88ff;
      color: #2f88ff;
    }

    i {
      font-size: 26px;
    }
    img {
      width: 20px;
      height: 20px;
      margin: 10px 0 8px;
    }

    .name {
      margin-top: 0px;
    }
  }
  .tips {
    flex: 1;
    font-size: 12px;
    color: #999999;
    line-height: 18px;
  }
}
:deep(.el-upload) {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
}
:deep(.el-textarea__inner) {
  border: none;
}
:deep(.container .textarea) {
  border: none;
}
:deep(textarea) {
  resize: none;
}
/*flex布局*/
.flex-contain {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  .el-icon-close {
    margin-right: 10px;
  }
}

.attachments-list {
  img {
    width: 15px;
    height: 15px;
    margin: 0px 4px 0px 10px;
  }
  .el-icon {
    cursor: pointer;
  }
}

.el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.el-icon.avatar-uploader-icon:hover {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed var(--el-color-primary-light-7);
  border-radius: 6px;
}
.el-upload {
  img {
    width: 100px;
    height: 100px;
    border-radius: 6px;
  }
}

.upload-img:hover .avatar-delete {
  display: block;
}
.avatar-delete {
  display: none;
  width: 100px;
  height: 100px;
  line-height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 6px;
  background: var(--el-color-primary-light-7);
  opacity: 0.8;
  color: #fff;
}
</style>
